<template>
  <div>
    <el-card>
      <i class="el-icon-search"> 筛选搜索</i>
      <el-form :inline="true" :model="searchList" style="margin-top: 20px" ref="formRef">
        <el-form-item label="姓名 :" prop="name">
          <el-input
            placeholder="请输入姓名"
            v-model="searchList.name"
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号码 :" prop="phone">
          <el-input
            placeholder="请输入手机号码"
            v-model="searchList.phone"
          ></el-input>
        </el-form-item>
        <el-form-item label="学校 :" prop="school">
          <el-input
            placeholder="请输入学校"
            v-model="searchList.school"
          ></el-input>
        </el-form-item>
        <el-form-item label="学历 :" prop="education">
          <el-select v-model="searchList.education" placeholder="请选择学历">
            <el-option label="专科" value="专科"></el-option>
            <el-option label="本科" value="本科"></el-option>
            <el-option label="硕士" value="硕士"></el-option>
            <el-option label="博士" value="博士"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="意向岗位 :" prop="postion">
          <el-select v-model="searchList.postion" placeholder="请选择意向岗位">
            <el-option label="Java前端开发" value="前端"></el-option>
            <el-option label="Java后端开发" value="后端"></el-option>
            <el-option label="软件测试" value="软件测试"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="意向工作地 :" prop="addr">
          <el-select v-model="searchList.addr" placeholder="请选择意向工作地">
            <el-option label="温州" value="温州"></el-option>
            <el-option label="南京" value="南京"></el-option>
            <el-option label="杭州" value="杭州"></el-option>
            <el-option label="上海" value="上海"></el-option>
            <el-option label="北京" value="北京"></el-option>
          </el-select>
        </el-form-item>
        </el-form-item>
        <el-form style="float: right">
          <el-button @click="reset()">重置</el-button>
          <el-button type="primary" @click="searchData(searchList)">查询</el-button>
        </el-form>
      </el-form>
    </el-card>
    <br />
    <!-- 操作 -->
    <el-card>
      <i class="el-icon-tickets"> 操作</i>
    </el-card>
    <br />
    <!-- 表单区域 -->
    <el-table
      :data="tablelist"
      border
      style="width: 100%"
      :header-cell-style="{ 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }"
    >
      <el-table-column
        type="index"
        label="序号"
        width="80px"
        prop="id"
      ></el-table-column>
      <el-table-column label="姓名" width="80px" prop="name"></el-table-column>
      <el-table-column label="性别" width="80px" prop="sex" :formatter="sexf"></el-table-column>
      <el-table-column label="手机号码" prop="phone"></el-table-column>
      <el-table-column label="邮箱" prop="email"></el-table-column>
      <el-table-column label="学校" prop="school"></el-table-column>
      <el-table-column label="学历" prop="education"></el-table-column>
      <el-table-column label="意向岗位" prop="postion"></el-table-column>
      <el-table-column
        label="意向工作地"
        width="100px"
        prop="addr"
      ></el-table-column>
      <el-table-column label="推荐人" prop="referrer"></el-table-column>
      <el-table-column label="投递时间" prop="time"></el-table-column>
      <el-table-column label="操作" width="250px">
        <template v-slot="scope">
          <!-- 查看简历按钮 -->
          <el-button
            type="primary"
            icon="el-icon-view"
            size="mini"
            prop="pdf"
            @click="look(scope.row.pdf)"
          ></el-button>
          <!-- 通过插入花名册按钮 -->
          <el-button
            type="success"
            icon="el-icon-success"
            size="mini"
            @click="pass(scope.row)"
          ></el-button>
          <!-- 不通过插入人才库按钮 -->
          <el-button
            type="warning"
            icon="el-icon-suitcase"
            size="mini"
            @click="backUp(scope.row)"
          ></el-button>
          <!-- 删除简历 -->
          <el-button
            type="danger"
            icon="el-icon-delete"
            size="mini"
            @click="deleteData(scope.row.id)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNum"
      :page-sizes="[2, 5, 10]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    </div>
  </div>
</template>
<script>
import {
  searchResume,
  deleteById,
  passResume,
  backUpResume
} from '@/api/resumelist'

export default {
  data() {
    return {
      tablelist: [],
      editDialogVisible: false,
      listLoading: true,
      total: 0,
      pageNum: 1,
      pageSize: 5,
      //搜索表
      searchList: {
        name: '',
        phone: '',
        school: '',
        education: '',
        pdf: '',
        postion: '',
        addr: ''
      },
      rePutList: {
        name: '',
        phone: '',
        school: '',
        education: '',
        pdf: '',
        postion: '',
        addr: '',
        referrer: '',
        time: ''
      }
    }
  },
  created() {
    this.load()
  },
  methods: {
    load() {
      fetch(
        'http://localhost:8080/resume/page?pageNum=' +
          this.pageNum +
          '&pageSize=' +
          this.pageSize
      )
        .then((res) => res.json())
        .then((res) => {
          console.log(res)
          this.tablelist = res.data
          this.total = res.total
        })
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.load()
    },
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum
      this.load()
    },
    searchData(e) {
      this.listLoading = true
      console.log(e)
      searchResume(e).then((res) => {
        console.log(res)
        this.tablelist = res.data.data
        this.total = res.data.total
      })
    },
    deleteData(id) {
      this.listLoading = true
      deleteById(id).then((res) => {
        console.log(res)
        if (res.status == 200) {
          this.$message.success('删除成功')
        } else {
          this.$message.error('删除失败')
        }
        this.load()
      })
    },
    look(row) {
      console.log(row)
      window.open(row)
    },
    sexf(row) {
      return row.sex === 1 ? '男' : '女'
    },
    reset() {
      this.$refs.formRef.resetFields()
    },
    resetinside() {
      this.$refs.formRef2.resetFields()
    },
    pass(resumeMessage) {
      this.listLoading = true
      console.log(resumeMessage)
      passResume(resumeMessage).then((res) => {
        console.log(res)
        if (res.status == 200) {
          this.$message.success('传输至花名册成功')
        } else {
          this.$message.error('传输至花名册失败')
        }
        this.load()
      })
    },
    backUp(resumeMessage) {
      this.listLoading = true
      console.log(resumeMessage)
      backUpResume(resumeMessage).then((res) => {
        console.log(res)
        if (res.status == 200) {
          this.$message.success('传输至人才库成功')
        } else {
          this.$message.error('传输至人才库失败')
        }
        this.load()
      })
    }
  }
}
</script>

<style scoped>
.div1 {
  position: relative;
  float: right;
  bottom: 10px;
}
.el-form-item {
  margin-left: 50px;
  height: 20px;
}
.el-input {
  width: 200px;
}
</style>
